{% extends "uc/uc-base.html" %}
{% load static %}
{% block content %}
    {#    弹窗#}
    {% if messages %}
        <script>
            {% for msg in messages %}
                alert('{{ msg.message }}');
            {% endfor %}
        </script>
    {% endif %}

    <style>
        .textarea {
            width: 300px;
            color: #888;
            padding: 6px 10px;
            height: 138px;
            line-height: 24px;
            border: 1px solid #e1e1e1;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            var tfrow = document.getElementById('tfhover').rows.length;
            var tbRow = [];
            for (var i = 1; i < tfrow; i++) {
                tbRow[i] = document.getElementById('tfhover').rows[i];
                tbRow[i].onmouseover = function () {
                    this.style.backgroundColor = '#ffffff';
                };
                tbRow[i].onmouseout = function () {
                    this.style.backgroundColor = '#e5ffff';
                };
            }
        };
    </script>

    <style type="text/css">
        table.tftable {
            font-size: 14px;
            color: #333333;
            width: 100%;
            border-width: 1px;
            border-color: #729ea5;
            border-collapse: collapse;
        }

        table.tftable th {
            font-size: 14px;
            color: #585757;
            background-color: #80bef1;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #4ea9f3;
            text-align: left;
        }

        table.tftable tr {
            background-color: #e5ffff;
        }

        table.tftable td {
            font-size: 14px;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #4ea9f3;
        }
    </style>

    <div class="wrapper uc-router">
        <ul>
            <li><a href="{% url 'index' %}">TOP</a></li>
            <li><span class="divider"></span></li>
            <li><span><a href="{% url 'uc_account' %}">My Page</a></span></li>
            <li><span class="divider"></span></li>
            <li><span>有料会員</span></li>
        </ul>
    </div>

    <div class="wrapper">
        <div class="uc-main clearfix">

            <div class="uc-aside">
                <div class="uc-menu">
                    <div class="tit">My Page</div>
                    <ul class="sublist">
                        <li><a href="{% url 'uc_account' %}">アカウント</a></li>
                        <li><a href="{% url 'uc_collection' %}">ブックマーク</a></li>
                        <li><a href="{% url 'uc_history' %}">閲覧履歴</a></li>
                        <li><a href="{% url 'uc_vip' %}">有料会員</a></li>
                        <li><a href="{% url 'uc_contact' %}">問い合わせ</a></li>
                    </ul>
                </div>
            </div>

            <div class="uc-content">

                <div class="uc-panel">
                    <div class="uc-bigtit">有料会員</div>
                    <div class="uc-panel-bd">
                        <div class="account-info clearfix">
                            <form action="{% url 'uc_vip' %}" method="POST">
                                {% csrf_token %}
                                <div class="col-userinfo">
                                    <div class="control-group">
                                        <div class="hd"></div>
                                        <div class="bd">
                                            {% if err %}
                                                <p style="color: #aa1111">※ 発送失敗した：{{ err }}</p>
                                            {% endif %}
                                            {% if success %}
                                                <p style="color: #4ab933">※ 発送成功しました！ありがとうございました！！(少々お待ちください)</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <div class="hd">* E-mail：</div>
                                        {#                                    <div class="bd">#}
                                        {#                                        <div class="text-black">{{ user.email }}</div>#}
                                        {#                                    </div>#}
                                        <div class="bd"><input class="ui-txtin" type="text" name="email"
                                                {% if user.email %}
                                                               value="{{ user.email }}"
                                                {% endif %}
                                                               placeholder="E-mail"/></div>
                                    </div>
                                    <div class="control-group">
                                        <div class="hd">*　氏　 名：</div>
                                        <div class="bd"><input class="ui-txtin" type="text" name="truename"
                                                {% if user.truename %}
                                                               value="{{ user.truename }}"
                                                {% endif %}
                                                               placeholder="氏名を入力してください"/></div>
                                    </div>
                                    <div class="control-group">
                                        <div class="hd">* 連絡先：</div>
                                        <div class="bd"><input class="ui-txtin" type="text" name="phone"
                                                {% if user.phone %}
                                                               value="{{ user.phone }}"
                                                {% endif %}
                                                               placeholder="電話番号を入力してください"/></div>
                                    </div>
                                    <div class="control-group">
                                        <div class="hd">会社名：</div>
                                        <div class="bd"><input class="ui-txtin" type="text" name="company_name"
                                                {% if user.company_name %}
                                                               value="{{ user.company_name }}"
                                                {% endif %}
                                                               placeholder="会社名を入力してください"/></div>
                                    </div>
                                    <div class="control-group">
                                        <div class="hd">住   所：</div>
                                        <div class="bd"><input class="ui-txtin" type="text" name="company_address"
                                                {% if user.company_address %}
                                                               value="{{ user.company_address }}"
                                                {% endif %}
                                                               placeholder="住所を入力してください"/></div>
                                    </div>
                                    <div class="control-group">
                                        <div class="hd">* 購入商品：</div>

                                        <table id="tfhover" class="tftable" border="1">
                                            <tr>
                                                <th>商品名称</th>
                                                <th>申請期間</th>
                                                <th>会費/月</th>
                                                <th>費用小計</th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input name="v0c" id="v0c" type="checkbox" onclick="Check0()"/>
                                                    VIP会員
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v0" id="v01" value="3"
                                                                                onclick="Radio0()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v0" id="v02" value="6"
                                                                                onclick="Radio0()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v0" id="v03" value="12"
                                                                                onclick="Radio0()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v0" id="v04" value="24"
                                                                                onclick="Radio0()"/>2年</label>
                                                </td>
                                                <td>
                                                    800元/月
                                                </td>
                                                <td>
                                                    <div id="v0p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check0() {
                                                        var v0c = document.getElementById("v0c");
                                                        var v0r = document.getElementsByName("v0");
                                                        if (v0c.checked == true) {
                                                            
                                                            if (v0r[0].checked) {
                                                                document.getElementById('v0p').innerHTML = 2400;
                                                
                                                                all();
                                                            } else if (v0r[1].checked) {
                                                                document.getElementById('v0p').innerHTML = 4800;
                                                            
                                                                all();
                                                            } else if (v0r[2].checked) {
                                                                document.getElementById('v0p').innerHTML = 9600;
                                                    
                                                                all();
                                                            } else if (v0r[3].checked) {
                                                                document.getElementById('v0p').innerHTML = 19200;
                                                    
                                                                all();
                                                            }
                                                        } else {
                                                            
                                                            document.getElementById('v0p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio0() {
                                                        var v0r = document.getElementsByName("v0");
                                                        var v0c = document.getElementById("v0c");
                                                        if (v0c.checked == true) {
                                                            if (v0r[0].checked) {
                                                                document.getElementById('v0p').innerHTML = 2400;
                                                
                                                                all();
                                                            } else if (v0r[1].checked) {
                                                                document.getElementById('v0p').innerHTML = 4800;
                                                            
                                                                all();
                                                            } else if (v0r[2].checked) {
                                                                document.getElementById('v0p').innerHTML = 9600;
                                                    
                                                                all();
                                                            } else if (v0r[3].checked) {
                                                                document.getElementById('v0p').innerHTML = 19200;
                                                    
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v1c" id="v1c" type="checkbox" onclick="Check1()"/>
                                                    NEWS・政策
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v1" id="v11" value="3"
                                                                                onclick="Radio1()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v1" id="v12" value="6"
                                                                                onclick="Radio1()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v1" id="v13" value="12"
                                                                                onclick="Radio1()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v1" id="v14" value="24"
                                                                                onclick="Radio1()"/>2年</label>
                                                </td>
                                                <td>
                                                    100元/月
                                                </td>
                                                <td>
                                                    <div id="v1p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check1() {
                                                        var v1c = document.getElementById("v1c");
                                                        var v1r = document.getElementsByName("v1");
                                                        if (v1c.checked == true) {
                                                            
                                                            if (v1r[0].checked) {
                                                                document.getElementById('v1p').innerHTML = 300;
                                                  
                                                                all();
                                                            } else if (v1r[1].checked) {
                                                                document.getElementById('v1p').innerHTML = 600;
                                                          
                                                                all();
                                                            } else if (v1r[2].checked) {
                                                                document.getElementById('v1p').innerHTML = 1200;
                                                           
                                                                all();
                                                            } else if (v1r[3].checked) {
                                                                document.getElementById('v1p').innerHTML = 2400;
                                                       
                                                                all();
                                                            }
                                                        } else {
                                                            
                                                            document.getElementById('v1p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio1() {
                                                        var v1r = document.getElementsByName("v1");
                                                        var v1c = document.getElementById("v1c");
                                                        if (v1c.checked === true) {
                                                            if (v1r[0].checked) {
                                                                document.getElementById('v1p').innerHTML = 300;
                                                  
                                                                all();
                                                            } else if (v1r[1].checked) {
                                                                document.getElementById('v1p').innerHTML = 600;
                                                          
                                                                all();
                                                            } else if (v1r[2].checked) {
                                                                document.getElementById('v1p').innerHTML = 1200;
                                                           
                                                                all();
                                                            } else if (v1r[3].checked) {
                                                                document.getElementById('v1p').innerHTML = 2400;
                                                       
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v2c" id="v2c" type="checkbox" onclick="Check2()"/>
                                                    有機原料
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v2" id="v21" value="3"
                                                                                onclick="Radio2()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v2" id="v22" value="6"
                                                                                onclick="Radio2()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v2" id="v23" value="12"
                                                                                onclick="Radio2()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v2" id="v24" value="24"
                                                                                onclick="Radio2()"/>2年</label>
                                                </td>
                                                <td>
                                                    200元/月
                                                </td>
                                                <td>
                                                    <div id="v2p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check2() {
                                                        var v2c = document.getElementById("v2c");
                                                        var v2r = document.getElementsByName("v2");
                                                        if (v2c.checked == true) {
                                                            if (v2r[0].checked) {
                                                                document.getElementById('v2p').innerHTML = 600;
                                                   
                                                                all();
                                                            } else if (v2r[1].checked) {
                                                                document.getElementById('v2p').innerHTML = 1200;
                                                     
                                                                all();
                                                            } else if (v2r[2].checked) {
                                                                document.getElementById('v2p').innerHTML = 2400;
                                                          
                                                                all();
                                                            } else if (v2r[3].checked) {
                                                                document.getElementById('v2p').innerHTML = 4800;
                                                     
                                                                all();
                                                            }
                                                        } else {
                                                            
                                                            document.getElementById('v2p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio2() {
                                                        var v2r = document.getElementsByName("v2");
                                                        var v2c = document.getElementById("v2c");
                                                        if (v2c.checked === true) {
                                                            if (v2r[0].checked) {
                                                                document.getElementById('v2p').innerHTML = 600;
                                                   
                                                                all();
                                                            } else if (v2r[1].checked) {
                                                                document.getElementById('v2p').innerHTML = 1200;
                                                     
                                                                all();
                                                            } else if (v2r[2].checked) {
                                                                document.getElementById('v2p').innerHTML = 2400;
                                                          
                                                                all();
                                                            } else if (v2r[3].checked) {
                                                                document.getElementById('v2p').innerHTML = 4800;
                                                     
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>

                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v3c" id="v3c" type="checkbox" onclick="Check3()"/>
                                                    無機原料
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v3" id="v31" value="3"
                                                                                onclick="Radio3()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v3" id="v32" value="6"
                                                                                onclick="Radio3()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v3" id="v33" value="12"
                                                                                onclick="Radio3()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v3" id="v34" value="24"
                                                                                onclick="Radio3()"/>2年</label>
                                                </td>
                                                <td>
                                                    100元/月
                                                </td>
                                                <td>
                                                    <div id="v3p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check3() {
                                                        var v3c = document.getElementById("v3c");
                                                        var v3r = document.getElementsByName("v3");
                                                        if (v3c.checked == true) {
                                                            if (v3r[0].checked) {
                                                                document.getElementById('v3p').innerHTML = 300;
                                         
                                                                all();
                                                            } else if (v3r[1].checked) {
                                                                document.getElementById('v3p').innerHTML = 600;
                                                             
                                                                all();
                                                            } else if (v3r[2].checked) {
                                                                document.getElementById('v3p').innerHTML = 1200;
                                                         
                                                                all();
                                                            } else if (v3r[3].checked) {
                                                                document.getElementById('v3p').innerHTML = 2400;
                                                     
                                                                all();
                                                            }
                                                        } else {
                                            
                                                            document.getElementById('v3p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio3() {
                                                        var v3r = document.getElementsByName("v3");
                                                        var v3c = document.getElementById("v3c");
                                                        if (v3c.checked === true) {
                                                            if (v3r[0].checked) {
                                                                document.getElementById('v3p').innerHTML = 300;
                                         
                                                                all();
                                                            } else if (v3r[1].checked) {
                                                                document.getElementById('v3p').innerHTML = 600;
                                                             
                                                                all();
                                                            } else if (v3r[2].checked) {
                                                                document.getElementById('v3p').innerHTML = 1200;
                                                         
                                                                all();
                                                            } else if (v3r[3].checked) {
                                                                document.getElementById('v3p').innerHTML = 2400;
                                                     
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v4c" id="v4c" type="checkbox" onclick="Check4()"/>
                                                    フッ素工業
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v4" id="v41" value="3"
                                                                                onclick="Radio4()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v4" id="v42" value="6"
                                                                                onclick="Radio4()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v4" id="v43" value="12"
                                                                                onclick="Radio4()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v4" id="v44" value="24"
                                                                                onclick="Radio4()"/>2年</label>
                                                </td>
                                                <td>
                                                    200元/月
                                                </td>
                                                <td>
                                                    <div id="v4p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check4() {
                                                        var v4c = document.getElementById("v4c");
                                                        var v4r = document.getElementsByName("v4");
                                                        if (v4c.checked == true) {
                                                            if (v4r[0].checked) {
                                                                document.getElementById('v4p').innerHTML = 600;
                                                        
                                                                all();
                                                            } else if (v4r[1].checked) {
                                                                document.getElementById('v4p').innerHTML = 1200;
                                                              
                                                                all();
                                                            } else if (v4r[2].checked) {
                                                                document.getElementById('v4p').innerHTML = 2400;
                                                          
                                                                all();
                                                            } else if (v4r[3].checked) {
                                                                document.getElementById('v4p').innerHTML = 4800;
                                                                
                                                                all();
                                                            }
                                                        } else {
                                                            
                                                            document.getElementById('v4p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio4() {
                                                        var v4r = document.getElementsByName("v4");
                                                        var v4c = document.getElementById("v4c");
                                                        if (v4c.checked === true) {
                                                            if (v4r[0].checked) {
                                                                document.getElementById('v4p').innerHTML = 600;
                                                        
                                                                all();
                                                            } else if (v4r[1].checked) {
                                                                document.getElementById('v4p').innerHTML = 1200;
                                                              
                                                                all();
                                                            } else if (v4r[2].checked) {
                                                                document.getElementById('v4p').innerHTML = 2400;
                                                          
                                                                all();
                                                            } else if (v4r[3].checked) {
                                                                document.getElementById('v4p').innerHTML = 4800;
                                                                
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v5c" id="v5c" type="checkbox" onclick="Check5()"/>
                                                    臭素工業
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v5" id="v51" value="3"
                                                                                onclick="Radio5()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v5" id="v52" value="6"
                                                                                onclick="Radio5()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v5" id="v53" value="12"
                                                                                onclick="Radio5()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v5" id="v54" value="24"
                                                                                onclick="Radio5()"/>2年</label>
                                                </td>
                                                <td>
                                                    100元/月
                                                </td>
                                                <td>
                                                    <div id="v5p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check5() {
                                                        var v5c = document.getElementById("v5c");
                                                        var v5r = document.getElementsByName("v5");
                                                        if (v5c.checked == true) {
                                                            if (v5r[0].checked) {
                                                                document.getElementById('v5p').innerHTML = 300;
                                                             
                                                                all();
                                                            } else if (v5r[1].checked) {
                                                                document.getElementById('v5p').innerHTML = 600;
                                                                
                                                                all();
                                                            } else if (v5r[2].checked) {
                                                                document.getElementById('v5p').innerHTML = 1200;
                                                               
                                                                all();
                                                            } else if (v5r[3].checked) {
                                                                document.getElementById('v5p').innerHTML = 2400;
                                                               
                                                                all();
                                                            }
                                                        } else {
                                                            
                                                            document.getElementById('v5p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio5() {
                                                        var v5r = document.getElementsByName("v5");
                                                        var v5c = document.getElementById("v5c");
                                                        if (v5c.checked === true) {
                                                            if (v5r[0].checked) {
                                                                document.getElementById('v5p').innerHTML = 300;
                                                             
                                                                all();
                                                            } else if (v5r[1].checked) {
                                                                document.getElementById('v5p').innerHTML = 600;
                                                                
                                                                all();
                                                            } else if (v5r[2].checked) {
                                                                document.getElementById('v5p').innerHTML = 1200;
                                                               
                                                                all();
                                                            } else if (v5r[3].checked) {
                                                                document.getElementById('v5p').innerHTML = 2400;
                                                               
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>

                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v6c" id="v6c" type="checkbox" onclick="Check6()"/>
                                                    リン工業
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v6" id="v61" value="3"
                                                                                onclick="Radio6()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v6" id="v62" value="6"
                                                                                onclick="Radio6()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v6" id="v63" value="12"
                                                                                onclick="Radio6()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v6" id="v64" value="24"
                                                                                onclick="Radio6()"/>2年</label>
                                                </td>
                                                <td>
                                                    100元/月
                                                </td>
                                                <td>
                                                    <div id="v6p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check6() {
                                                        var v6c = document.getElementById("v6c");
                                                        var v6r = document.getElementsByName("v6");
                                                        if (v6c.checked == true) {
                                                            if (v6r[0].checked) {
                                                                document.getElementById('v6p').innerHTML = 300;
                                                             
                                                                all();
                                                            } else if (v6r[1].checked) {
                                                                document.getElementById('v6p').innerHTML = 600;
                                                               
                                                                all();
                                                            } else if (v6r[2].checked) {
                                                                document.getElementById('v6p').innerHTML = 1200;
                                                               
                                                                all();
                                                            } else if (v6r[3].checked) {
                                                                document.getElementById('v6p').innerHTML = 2400;
                                                                
                                                                all();
                                                            }
                                                        } else {
                                              
                                                            document.getElementById('v6p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio6() {
                                                        var v6r = document.getElementsByName("v6");
                                                        var v6c = document.getElementById("v6c");
                                                        if (v6c.checked === true) {
                                                            if (v6r[0].checked) {
                                                                document.getElementById('v6p').innerHTML = 300;
                                                             
                                                                all();
                                                            } else if (v6r[1].checked) {
                                                                document.getElementById('v6p').innerHTML = 600;
                                                               
                                                                all();
                                                            } else if (v6r[2].checked) {
                                                                document.getElementById('v6p').innerHTML = 1200;
                                                               
                                                                all();
                                                            } else if (v6r[3].checked) {
                                                                document.getElementById('v6p').innerHTML = 2400;
                                                                
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v7c" id="v7c" type="checkbox" onclick="Check7()"/>
                                                    肥料
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v7" id="v71" value="3"
                                                                                onclick="Radio7()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v7" id="v72" value="6"
                                                                                onclick="Radio7()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v7" id="v73" value="12"
                                                                                onclick="Radio7()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v7" id="v74" value="24"
                                                                                onclick="Radio7()"/>2年</label>
                                                </td>
                                                <td>
                                                    100元/月
                                                </td>
                                                <td>
                                                    <div id="v7p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check7() {
                                                        var v7c = document.getElementById("v7c");
                                                        var v7r = document.getElementsByName("v7");
                                                        if (v7c.checked == true) {
                                                            if (v7r[0].checked) {
                                                                document.getElementById('v7p').innerHTML = 300;
                                                           
                                                                all();
                                                            } else if (v7r[1].checked) {
                                                                document.getElementById('v7p').innerHTML = 600;
                                                               
                                                                all();
                                                            } else if (v7r[2].checked) {
                                                                document.getElementById('v7p').innerHTML = 1200;
                                                              
                                                                all();
                                                            } else if (v7r[3].checked) {
                                                                document.getElementById('v7p').innerHTML = 2400;
                                                               
                                                                all();
                                                            }
                                                        } else {
                                                  
                                                            document.getElementById('v7p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio7() {
                                                        var v7r = document.getElementsByName("v7");
                                                        var v7c = document.getElementById("v7c");
                                                        if (v7c.checked === true) {
                                                            if (v7r[0].checked) {
                                                                document.getElementById('v7p').innerHTML = 300;
                                                           
                                                                all();
                                                            } else if (v7r[1].checked) {
                                                                document.getElementById('v7p').innerHTML = 600;
                                                               
                                                                all();
                                                            } else if (v7r[2].checked) {
                                                                document.getElementById('v7p').innerHTML = 1200;
                                                              
                                                                all();
                                                            } else if (v7r[3].checked) {
                                                                document.getElementById('v7p').innerHTML = 2400;
                                                               
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v8c" id="v8c" type="checkbox" onclick="Check8()"/>
                                                    塗料工業
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v8" id="v81" value="3"
                                                                                onclick="Radio8()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v8" id="v82" value="6"
                                                                                onclick="Radio8()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v8" id="v83" value="12"
                                                                                onclick="Radio8()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v8" id="v84" value="24"
                                                                                onclick="Radio8()"/>2年</label>
                                                </td>
                                                <td>
                                                    200元/月
                                                </td>
                                                <td>
                                                    <div id="v8p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check8() {
                                                        var v8c = document.getElementById("v8c");
                                                        var v8r = document.getElementsByName("v8");
                                                        if (v8c.checked == true) {
                                                            if (v8r[0].checked) {
                                                                document.getElementById('v8p').innerHTML = 600;
                                                                
                                                                all();
                                                            } else if (v8r[1].checked) {
                                                                document.getElementById('v8p').innerHTML = 1200;
                                                                
                                                                all();
                                                            } else if (v8r[2].checked) {
                                                                document.getElementById('v8p').innerHTML = 2400;
                                                               
                                                                all();
                                                            } else if (v8r[3].checked) {
                                                                document.getElementById('v8p').innerHTML = 4800;
                                                               
                                                                all();
                                                            }
                                                        } else {
                                                            
                                                            document.getElementById('v8p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio8() {
                                                        var v8r = document.getElementsByName("v8");
                                                        var v8c = document.getElementById("v8c");
                                                        if (v8c.checked === true) {
                                                            if (v8r[0].checked) {
                                                                document.getElementById('v8p').innerHTML = 600;
                                                                
                                                                all();
                                                            } else if (v8r[1].checked) {
                                                                document.getElementById('v8p').innerHTML = 1200;
                                                                
                                                                all();
                                                            } else if (v8r[2].checked) {
                                                                document.getElementById('v8p').innerHTML = 2400;
                                                               
                                                                all();
                                                            } else if (v8r[3].checked) {
                                                                document.getElementById('v8p').innerHTML = 4800;
                                                               
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <input name="v9c" id="v9c" type="checkbox" onclick="Check9()"/>
                                                    農　薬
                                                </td>
                                                <td>
                                                    <label class="check"><input type="radio" name="v9" id="v91" value="3"
                                                                                onclick="Radio9()"/>三ヶ月</label>
                                                    <label class="check"><input type="radio" name="v9" id="v92" value="6"
                                                                                onclick="Radio9()"/>半年</label>
                                                    <label class="check"><input type="radio" name="v9" id="v93" value="12"
                                                                                onclick="Radio9()"/>1年</label>
                                                    <label class="check"><input type="radio" name="v9" id="v94" value="24"
                                                                                onclick="Radio9()"/>2年</label>
                                                </td>
                                                <td>
                                                    200元/月
                                                </td>
                                                <td>
                                                    <div id="v9p"></div>
                                                </td>
                                                <script type="text/javascript">
                                                    function Check9() {
                                                        var v9c = document.getElementById("v9c");
                                                        var v9r = document.getElementsByName("v9");
                                                        if (v9c.checked == true) {
                                                            if (v9r[0].checked) {
                                                                document.getElementById('v9p').innerHTML = 600;
                                                             
                                                                all();
                                                            } else if (v9r[1].checked) {
                                                                document.getElementById('v9p').innerHTML = 1200;
                                                                
                                                                all();
                                                            } else if (v9r[2].checked) {
                                                                document.getElementById('v9p').innerHTML = 2400;
                                                              
                                                                all();
                                                            } else if (v9r[3].checked) {
                                                                document.getElementById('v9p').innerHTML = 4800;
                                                               
                                                                all();
                                                            }
                                                        } else {
                                                            
                                                            document.getElementById('v9p').innerHTML = null;
                                                            all();
                                                        }
                                                    }

                                                    function Radio9() {
                                                        var v9r = document.getElementsByName("v9");
                                                        var v9c = document.getElementById("v9c");
                                                        if (v9c.checked === treu) {
                                                            if (v9r[0].checked) {
                                                                document.getElementById('v9p').innerHTML = 600;
                                                             
                                                                all();
                                                            } else if (v9r[1].checked) {
                                                                document.getElementById('v9p').innerHTML = 1200;
                                                                
                                                                all();
                                                            } else if (v9r[2].checked) {
                                                                document.getElementById('v9p').innerHTML = 2400;
                                                              
                                                                all();
                                                            } else if (v9r[3].checked) {
                                                                document.getElementById('v9p').innerHTML = 4800;
                                                               
                                                                all();
                                                            }
                                                        }
                                                        
                                                    }

                                                </script>
                                            </tr>

                                            <tr>
                                                <td>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <b>总计</b>
                                                </td>
                                                <td>
                                                    <div id="vp" name="vp" value="200"></div>
                                                </td>
                                                <script>
                                                    function all() {
                                                        var v0p = 0;
                                                        var v1p = 0;
                                                        var v2p = 0;
                                                        var v3p = 0;
                                                        var v4p = 0;
                                                        var v5p = 0;
                                                        var v6p = 0;
                                                        var v7p = 0;
                                                        var v8p = 0;
                                                        var v9p = 0;

                                                        if (document.getElementById("v0p").innerText) {
                                                            v0p = parseInt(document.getElementById("v0p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v1p").innerText) {
                                                            v1p = parseInt(document.getElementById("v1p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v2p").innerText) {
                                                            v2p = parseInt(document.getElementById("v2p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v3p").innerText) {
                                                            v3p = parseInt(document.getElementById("v3p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v4p").innerText) {
                                                            v4p = parseInt(document.getElementById("v4p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v5p").innerText) {
                                                            v5p = parseInt(document.getElementById("v5p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v6p").innerText) {
                                                            v6p = parseInt(document.getElementById("v6p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v7p").innerText) {
                                                            v7p = parseInt(document.getElementById("v7p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v8p").innerText) {
                                                            v8p = parseInt(document.getElementById("v8p").innerText);
                                                        }
                                                        ;

                                                        if (document.getElementById("v9p").innerText) {
                                                            v9p = parseInt(document.getElementById("v9p").innerText);
                                                        }
                                                        ;

                                                        var vp = v0p + v1p + v2p + v3p + v4p + v5p + v6p + v7p + v8p + v9p;
                                                        console.log(v0p,v1p,v2p,v3p)
                                                        document.getElementById('vp').innerHTML = vp;
                                                    }
                                                </script>
                                            </tr>

                                        </table>
                                    </div>

                                    <div class="control-group">
                                        <div class="hd"></div>

                                        <div class="bd pay" style="display: flex;
    justify-content: space-between;
    align-items: center;">
                                            <div style="align-content: center">
                                                <img src="{% static 'images/alipay.jpg' %}" width="250px">

                                            </div>
                                            <div style="align-content: center">
                                                <img src="{% static 'images/wechatpay2.jpg' %}" width="250px">
                                            </div>

                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="hd">* 支払方法：</div>

                                        <div class="bd pay" style="display: flex;
    {#justify-content: space-between;#}
    align-items: center;">
                                            <div style="align-content: center">
                                                <label class="check"><input type="radio" name="pay"
                                                                            id="alipay" value="0"/>AliPay</label>
                                            </div>
                                            <div style="align-content: center;margin-left: 340px;">
                                                <label class="check"><input type="radio" name="pay" id="wechatpay" value="1"/>WeChatPay</label>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="hd">内容確認：</div>
                                        <div class="bd">
                                            <label><input type="checkbox" name="check"/>内容確認しました</label>
                                        </div>
                                    </div>

                                    <div class="control-submit">
                                        <input class="ui-btn-theme submit" type="submit" value="確認"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}